import React from "react";
import { Switch, Route } from "react-router-dom";
import Article from "./manage/Article/Default";
import Tags from "./manage/Tags/Default";
import Comment from "./manage/Comment/List";
import Home from "./manage/Home";
import { Layout, Menu, Breadcrumb } from "antd";
import { HomeOutlined, EditOutlined, TagsOutlined,MessageOutlined } from "@ant-design/icons";

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
const pathname = {
  "/manage": "首页",
  "/article": "文章管理",
  "/list": "文章列表",
  "/add": "添加文章",
  "/classify": "文章归类",
  "/tag": "标签管理",
  "/taglist": "标签列表",
  "/addtag": "新增标签",
  "/put": "修改文章",
  "/comment": "留言墙管理",
  "/All": "全部留言",
};

class Manage extends React.Component {
  state = {
    menu: [
      {
        path: "/home",
        text: "HOME",
        icon: <HomeOutlined />,
      },
      {
        path: "/article",
        text: "文章管理",
        icon: <EditOutlined />,
        children: [
          {
            path: "/list",
            text: "文章列表",
          },
          {
            path: "/add",
            text: "添加文章",
          },
          // {
          //   path: "/classify",
          //   text: "文章归类",
          // },
        ],
      },
      {
        path: "/tag",
        text: "标签管理",
        icon: <TagsOutlined />,
        children: [
          {
            path: "/taglist",
            text: "标签列表",
          },
          {
            path: "/addtag",
            text: "新增标签",
          },
        ],
      },
      {
        path: "/comment",
        text: "留言墙管理",
        icon: <MessageOutlined />,
        children: [
          {
            path: "/All",
            text: "全部留言",
          },
         
        ],
      }
    ],
    breadcrumb: [],
    breadcrumbRoutes: [],
  };

  // ocation=this.props.location 注意，这里是没有传参就用默认值
  initBreadCrumd = (location = this.props.location) => {
    const paths = location.pathname.split(/\b(?=\/)/);
    const breadcrumbRoutes = paths.map((item) => {
      return {
        path: item,
        breadcrumbName: pathname[item],
      };
    });
    this.setState({
      breadcrumb: paths,
      breadcrumbRoutes,
    });
  };
  componentDidMount() {
    // 一进来页面就执行
    this.initBreadCrumd();
    // 监听路由发生改变是调用
    this.props.history.listen(this.initBreadCrumd);
  }
  // 使用箭头函数定义类的方法（浏览器已支持）
  changeMenu = ({ item, key, keyPath, domEvent }) => {
    // key就是当前点击路径，可利用其实现跳转
    //   console.log(item, key );
    this.props.history.push(key);
  };
  render() {
    const { menu, breadcrumbRoutes } = this.state;
    const baseUrl = this.props.match.path;
    return (
      <Layout style={{ minHeight: "100vh" }}>
        <Sider
          collapsible
          // collapsed={collapsed}
          onCollapse={this.onCollapse}
        >
          <Menu
            theme="dark"
            mode="inline"
            // 默认高亮 key值
            defaultSelectedKeys={[baseUrl + "/home"]}
            defaultOpenKeys={[baseUrl + "/article"]}
            style={{ height: "100%", borderRight: 0 }}
            onClick={this.changeMenu}
          >
            {menu.map((item) => {
              if (item.children) {
                return (
                  <SubMenu
                    key={baseUrl + item.path}
                    icon={item.icon}
                    title={item.text}
                  >
                    {item.children.map((it) => (
                      <Menu.Item key={baseUrl + item.path + it.path}>
                        {it.text}
                      </Menu.Item>
                    ))}
                  </SubMenu>
                );
              } else {
                return (
                  <Menu.Item key={baseUrl + item.path} icon={item.icon}>
                    {item.text}
                  </Menu.Item>
                );
              }
            })}
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header
            className="site-layout-background"
            style={{ padding: 24, backgroundColor: "#fff", fontWeight: 900 }}
          >
            {/* 面包屑导航 */}
            <Breadcrumb routes={breadcrumbRoutes}></Breadcrumb>
          </Header>
          <Content
            className="site-layout-background"
            style={{
              height: 600,
              overflow: "auto",
              padding: 24,
              margin: 0,
              minHeight: 280,
            }}
          >
            <Switch>
              <Route path={baseUrl + "/home"} component={Home} />
              <Route path={baseUrl + "/article"} component={Article} />
              <Route path={baseUrl + "/tag"} component={Tags} />
               <Route path={baseUrl + "/comment"} component={Comment} />
            </Switch>
          </Content>
        </Layout>
      </Layout>
    );
  }
}

export default Manage;
